{% extends "./base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="app-overview-content">
    <div class="panel">
        <h4>基本信息</h4>
        <bk-container :col="2">
            <bk-row>
                <bk-col>应用ID: <b>$[ application.code ]</b></bk-col>
                <bk-col>应用名称: <b>$[ application.name ]</b></bk-col>
            </bk-row>
            <bk-row>
                <bk-col>应用版本: <b>$[ application.region ]</b></bk-col>
                <bk-col>应用引擎状态: <b>$[ application.config_info.engine_enabled ? '已开启' : '未开启' ]</b></bk-col>
            </bk-row>
            <bk-row>
                <bk-col>创建者: <b>$[ application.creator ]</b></bk-col>
                <bk-col>创建时间: <b v-bk-tooltips="{content: application.created }">$[ application.created_humanized ]</b></bk-col>
            </bk-row>
        </bk-container>
    </div>

    <div class="panel">
        <h4>快捷操作</h4>
        <bk-container :col="2">
            <bk-row>
                <bk-col>
                    当前状态: <b>$[ USER_IS_ADMIN_IN_APP ? '你已是该应用的管理员' : '你不具有管理员权限']</b>
                    <bk-button :theme="'primary'" type="submit" :title="'成为管理员'" @click="beAppAdmin" v-if="!USER_IS_ADMIN_IN_APP">
                        成为管理员
                    </bk-button>
                    <bk-button :theme="'danger'" :title="'退出应用'" @click="exitApp" v-else>
                        退出应用
                    </bk-button>
                </bk-col>
                <bk-col>
                    <a :href="appFrontendUrl">访问应用</a>
                </bk-col>
            </bk-row>
        </bk-container>
    </div>

    <div class="panel">
        <h4>应用市场</h4>
        <bk-container :col="2">
            <bk-row>
                <bk-col>发布至蓝鲸桌面市场: <b>$[ application.config_info.market_published ? '是' : '否' ]</b></bk-col>
                <bk-col style=" white-space: nowrap;text-overflow:ellipsis;overflow:hidden;" v-if="application.market_availabled_address">
                    市场访问主入口: <b v-bk-tooltips="{content: application.market_availabled_address }">$[ application.market_availabled_address ]</b></bk-col>
            </bk-row>
        </bk-container>
    </div>

    <div v-for="(module, index) in application.modules" :key="index" class="panel" >
        <h4>$[ module.is_default?'主': '']模块: $[ module.name ]</h4>
        <bk-container :col="2">
            <!--云原生应用不包含开发语言，仓库等信息-->
            <bk-row v-if="application.config_info.engine_enabled && application.type !== 'cloud_native'">
                <bk-col>开发语言: <b>$[ module.language ]</b></bk-col>
                <bk-col>初始化代码模板: <b>$[ module.template_display_name ]</b></bk-col>
            </bk-row>
            <bk-row v-if="application.config_info.engine_enabled && application.type !== 'cloud_native'">
                <bk-col>仓库类型: <b>$[ module.repo.display_name ]</b></bk-col>
                <bk-col style=" white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">仓库地址:
                    <b v-bk-tooltips="{content: module.repo.trunk_url }">$[ module.repo.trunk_url ]</b></bk-col>
            </bk-row>
            <bk-row>
                <bk-col>创建人: <b>$[ module.creator ]</b></bk-col>
                <bk-col>创建时间: <b v-bk-tooltips="{content: module.created }">$[ module.created_humanized ]</b></bk-col>
            </bk-row>
            <bk-row v-if="application.config_info.engine_enabled">
                <bk-col :span="2">
                    部署运行情况:
                    <bk-collapse v-bind:value="module.envs.map(env=>env.environment)">
                        <bk-collapse-item v-for="(env, index) in module.envs" :name="env.environment">
                            $[ env.environment ] 环境
                            <div slot="content" style="margin-bottom: 20px">
                                <div style="margin-bottom: 5px" >部署集群：</div>
                                <bk-select
                                    v-model="env.cluster_name"
                                    style="width: 250px;"
                                    @change="bindAppEnvCluster(module.name, env.environment, env.cluster_name)">
                                   <bk-option v-for="choice in cluster_choices"
                                        :key="choice.id"
                                        :id="choice.id"
                                        :name="choice.name">
                                    </bk-option>
                                </bk-select>
                            </div>
                            <div slot="content">
                                <bk-container :col="2" v-if="env.latest_operation">
                                    <bk-row>
                                        <bk-col>
                                            环境状态:
                                            <template v-if="env.is_offlined">
                                                <b style="color: #ffb848;">已下线</b>
                                            </template>
                                            <template v-else-if="env.latest_successful_operation === null">
                                                <b style="color: #dcdee5;">未部署</b>
                                            </template>
                                            <template v-else>
                                                <b style="color: #2dcb56;">在运行</b>
                                            </template>
                                        </bk-col>
                                        <bk-col>
                                            <template v-if="env.latest_successful_operation === null">

                                            </template>
                                            <template v-else-if="env.is_offlined">
                                                下线时间: <b v-bk-tooltips="{content: env.latest_successful_operation.created }">
                                                        $[ env.latest_successful_operation.created_humanized ]</b>
                                            </template>
                                            <template v-else>
                                                最后成功上线时间: <b v-bk-tooltips="{content: env.latest_successful_operation.created }">
                                                        $[ env.latest_successful_operation.created_humanized ]</b>
                                            </template>
                                        </bk-col>
                                    </bk-row>
                                    <hr style="margin-top: 0px;margin-bottom: 0px;"/>
                                    <bk-row>
                                        <bk-col>
                                            最近操作类型: <b>$[ env.latest_operation.operation_type ]</b>
                                        </bk-col>
                                        <bk-col>
                                            操作人: <b>$[ env.latest_operation.operator ]</b>
                                        </bk-col>
                                        <bk-col>
                                            操作状态: <b>$[ env.latest_operation.status ]</b>
                                        </bk-col>
                                        <bk-col>
                                            操作时间: <b v-bk-tooltips="{content: env.latest_operation.created }">
                                                        $[ env.latest_operation.created_humanized ]</b>
                                        </bk-col>
                                    </bk-row>
                                </bk-container>
                                <div v-else>
                                    该环境未进行过任何操作
                                </div>
                            </div>
                        </bk-collapse-item>
                    </bk-collapse>
                </bk-col>
            </bk-row>
        </bk-container>
    </div>
</div>
{% endblock %}

{% block main_script %}
<script>
    const data = {{ application | to_json }}
    const cluster_choices = {{ cluster_choices | to_json }}
    const USER_IS_ADMIN_IN_APP = {{ USER_IS_ADMIN_IN_APP | to_json }}

    const URLRouter = {
        memberManage: decodeURI("{% url 'admin.applications.detail.base_info.members.api' application.code %}"),
        bindCluster: decodeURI("{% url 'admin.applications.engine.env_conf.bind_cluster' application.code '${module}' '${env}' %}")
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#app-overview-content",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    application: data,
                    USER_IS_ADMIN_IN_APP,
                }
            },
            computed: {
              appFrontendUrl: function () {
                  return `{{ BKPAAS_URL }}/developer-center/apps/${this.application.code}/`
              }
            },
            methods: {
                beAppAdmin: function () {
                    this.$http.post(
                        URLRouter.memberManage,
                        {
                            // 管理员
                            username: '{{ request.user.username }}',
                            role: 2
                        }
                    ).then(resp => {
                        this.USER_IS_ADMIN_IN_APP = true
                    })
                },
                exitApp: function () {
                    this.$http.delete(
                        URLRouter.memberManage,
                        {
                            params: {
                                username: '{{ request.user.username }}'
                            }
                        }
                    ).then(resp => {
                        this.USER_IS_ADMIN_IN_APP = false
                    })
                },
                bindAppEnvCluster: function (module, env, clusterName) {
                    let url = URLRouter.bindCluster.replace("${module}", module).replace("${env}", env)
                    const h = this.$createElement

                    this.$bkInfo({
                        width: 550,
                        title: `更换应用部署集群确认`,
                        subHeader: h('div', {
                            style: {
                                'color': 'red',
                                'text-align': 'center'
                            }
                        }, `即将绑定 ${module} 模块 ${env} 环境部署集群为 ${clusterName}，是否确认？`),
                        confirmLoading: true,
                        confirmFn: async () => {
                            try {
                                await this.$http.post(
                                    url, {cluster_name: clusterName}
                                ).then(resp => {
                                    this.$bkMessage({theme: 'success', message: `绑定 ${module} 模块 ${env} 环境部署集群为 ${clusterName} 成功，配置将在下次部署时生效`})
                                })
                            } catch (e) {
                                this.$bkMessage({theme: 'error', message: `更换应用部署环境绑定集群失败`})
                                location.reload()
                            }
                        },
                        cancelFn: async () => {
                            location.reload()
                        }
                    })
                }
            }
        })
    })
</script>
<style>
    .bk-grid-container .bk-grid-row .bk-grid-col{
        margin: 10px 0px;
    }
</style>
{% endblock %}
